import React, {useState} from 'react';
import {
  StyleSheet,
  ScrollView,
  Text,
  View,
  Button,
  Image,
  TextInput,
  Switch,
} from 'react-native';
const logoImage = require('../../assets/logo.png');
const Register = ({navigation}) => {
  const [account, setAccount] = useState('');
  const [passWord, setPassWord] = useState('');
  const [isEnabled, setIsEnabled] = useState(false);

  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
  return (
    <ScrollView>
      <View style={styles.container}>
        <View style={styles.logo}>
          <Image style={styles.tinyLogo} source={logoImage} />
        </View>
        <Text style={styles.accountLabel}>輸入帳號</Text>
        <View style={styles.account}>
          <TextInput
            style={styles.accountInput}
            onChangeText={text => setAccount(text)}
            value={account}
          />
        </View>
        <Text style={styles.accountLabel}>輸入暱稱</Text>
        <View style={styles.account}>
          <TextInput
            style={styles.accountInput}
            onChangeText={text => setPassWord(text)}
            value={passWord}
          />
        </View>
        <Text style={styles.accountLabel}>輸入密碼</Text>
        <View style={styles.account}>
          <TextInput
            style={styles.accountInput}
            onChangeText={text => setPassWord(text)}
            value={passWord}
          />
        </View>
        <Text style={styles.accountLabel}>確認密碼</Text>
        <View style={styles.account}>
          <TextInput
            style={styles.accountInput}
            onChangeText={text => setPassWord(text)}
            value={passWord}
          />
        </View>
        <Text style={styles.accountLabel}>手機號碼</Text>
        <View style={styles.account}>
          <TextInput
            style={styles.accountInput}
            onChangeText={text => setPassWord(text)}
            value={passWord}
          />
        </View>
        <Text style={styles.accountLabel}>電子信箱</Text>
        <View style={styles.account}>
          <TextInput
            style={styles.accountInput}
            onChangeText={text => setPassWord(text)}
            value={passWord}
          />
        </View>

        <View style={styles.walletContainer}>
          <View style={styles.wallet}>
            <Button
              title="建立錢包"
              color="#aaa"
              onPress={() => navigation.navigate('RegisterScreen')}
            />
          </View>
        </View>

        <View style={styles.remember}>
          <Switch onValueChange={toggleSwitch} value={isEnabled} />
          <Text style={styles.rememberText}>本人已经年满18周岁，我已经</Text>
        </View>
        <View style={styles.clause}>
          <Text>阅读并接受</Text>
          <Text style={styles.clauseText}>相关条款</Text>
          <Text>和</Text>
          <Text style={styles.clauseText}>隐私协议</Text>
          <Text>。</Text>
        </View>
        <View style={styles.registerContainer}>
          <View style={styles.registerButton}>
            <Button
              title="開戶"
              color="#ff9800"
              onPress={() => navigation.navigate('LoginScreen')}
            />
          </View>
        </View>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingTop: 30,
    paddingLeft: 50,
    paddingRight: 50,
    paddingBottom: 50,
    color: '#333',
  },
  logo: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 10,
  },
  tinyLogo: {
    width: 280,
    height: 114,
  },
  accountLabel: {
    fontWeight: 'bold',
    marginTop: 10,
    lineHeight: 30,
  },
  account: {
    height: 30,
  },
  accountInput: {
    height: 30,
    borderColor: '#acacac',
    borderWidth: 1,
    backgroundColor: 'white',
  },
  remember: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-start',
    flexDirection: 'row',
    marginTop: 20,
  },
  clause: {
    paddingLeft: 48,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-start',
    flexDirection: 'row',
  },
  clauseText: {
    color: '#000099',
  },
  walletContainer: {
    marginTop: 20,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  wallet: {
    width: 150,
  },
  registerContainer: {
    marginTop: 20,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  registerButton: {
    width: 100,
  },
});

export default Register;
